import React, { Component } from "react";

import Header from "./components/Header";
import Footer from "./components/Footer";
import List from "./components/List";

import "./App.css";

export default class App extends Component {
    // 初始化状态
    state = {
        todos: [
            { id: "001", name: "吃饭", done: true },
            { id: "002", name: "睡觉", done: true },
            { id: "003", name: "敲代码", done: false },
            { id: "004", name: "逛街", done: true },
        ],
    };

    addTodo = (todo) => {
        const { todos } = this.state;

        this.setState({ todos: [todo, ...todos] });
    };

    changeTodo = (id, done) => {
        const index = this._findTodoIndex(id);
        if (index <= -1) {
            return;
        }

        let todo = this.state.todos[index];
        todo.done = done;

        this.setState({ todos: this.state.todos });

        // 以下方式也可以实现
        // const newTodos = this.state.todos.map((i) => {
        //     if (i.id === id) {
        //         return { ...i, done: done };
        //     } else {
        //         return i;
        //     }
        // });

        // this.setState({ todos: newTodos });
    };

    deleteTodo = (id) => {
        const index = this._findTodoIndex(id);
        if (index <= -1) {
            return;
        }

        let { todos } = this.state;

        todos.splice(index, 1);

        this.setState({ todos: todos });
    };

    changeAll = (done) => {
        const { todos } = this.state;

        const newTodos = todos.map((todo) => {
            return { ...todo, done: done };
        });

        this.setState({ todos: newTodos });
    };

    clearAllDone = () => {
        const { todos } = this.state;

        let newTodos = [];

        todos.forEach((todo) => {
            if (!todo.done) {
                newTodos.push(todo);
            }
        });

        this.setState({ todos: newTodos });
    };

    _findTodoIndex = (id) => {
        return this.state.todos.findIndex((i) => i.id === id);
    };

    render() {
        const { todos } = this.state;

        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <List
                        todos={todos}
                        deleteTodo={this.deleteTodo}
                        changeTodo={this.changeTodo}
                    />
                    <Footer
                        todos={todos}
                        changeAll={this.changeAll}
                        clearAllDone={this.clearAllDone}
                    />
                </div>
            </div>
        );
    }
}
